<div class="d-flex align-items-center justify-content-between">
  <nz-col>
    <button nz-button (click)="putAll()">
      {{'ball.addAll' | translate}}
    </button>
  </nz-col>
  <nz-col>
    <button nz-button (click)="removeAll()">
      {{'ball.removeAll' | translate}}
    </button>
  </nz-col>
  <nz-col>
    {{'ball.singleSystemContext' | translate}}
    <nz-switch [(ngModel)]="chatContext!.onlyOne"></nz-switch>
  </nz-col>
</div>
<div *ngIf="chatContext?.systems?.length===0">
  {{'ball.emptyContent' | translate}}
  <nz-skeleton></nz-skeleton>
</div>
<div *ngIf="chatContext?.systems?.length!==0" class="scrollable-list my-2">
  <div class="d-flex flex-column">
    <div *ngFor="let item of chatContext?.systems!">
      <nz-row>
        <nz-col class="w-75">
          {{getItem(item.id)?.content}}
        </nz-col>
        <nz-col>
          <nz-switch [(ngModel)]="item.in"></nz-switch>
        </nz-col>
      </nz-row>
    </div>
  </div>
</div>
